<template>
	<view class="w-full" style="color: #636363;">
		<view class="w-full border-b  p-2 box-border flex gap-10 text-sm" style="border-color: #303030;">
			<view :class="{'text-white':active=='当前委托'}" class="cursor-pointer" @click="clickTab('当前委托')">
				{{$t('bibi.dangqianweituo')}}</view>
			<view :class="{'text-white':active=='委托记录'}" class="cursor-pointer" @click="clickTab('委托记录')">
				{{$t('bibi.weituojilu')}}</view>
		</view>
		<view style="min-height: 100px;">
			<view class="p-2">
				<el-button type="danger" plain>{{$t('heyue.yijianquanping')}}</el-button>
			</view>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="date" :label="$t('heyue.home')" width="180" />
				<el-table-column prop="date" :label="$t('heyue.baozhengjing')" width="180" />
				<el-table-column prop="date" :label="$t('heyue.ganggan')" width="180" />
				<el-table-column prop="date" :label="$t('bibi.fangxiang')" width="180" />
				<el-table-column prop="date" :label="$t('heyue.kaicangpingjunjia')" width="180" />
				<el-table-column prop="date" :label="$t('bibi.zuixingjia')" width="180" />
				<el-table-column prop="date" :label="$t('heyue.yuguqiangpingjia')" width="180" />
				<el-table-column prop="date" :label="$t('heyue.weishixianyingkui')"  />
				<el-table-column prop="date" :label="$t('heyue.shouyilv')" />
				<el-table-column prop="date" :label="$t('heyue.zhiying')+'/'+$t('heyue.zhisun')"  />
				<el-table-column :label="$t('heyue.caozuo')" width="180">
					<template #default>
						<el-button link type="primary" size="small">
							Detail
						</el-button>
						<el-button link type="primary" size="small">Edit</el-button>
					</template>
				</el-table-column>
				<template #empty>
					<el-empty :description="$t('bibi.zanwushuju')" />
				</template>
				
			</el-table>
		</view>
	</view>
</template>

<script>
	import {
		CaretBottom
	} from '@element-plus/icons-vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				active: '当前委托',
				tableData: []
			}
		},
		components: {
			CaretBottom
		},
		computed: {
			...mapState({
				mode: state => state.app.mode,
				sysConfig: state => state.app.sysConfig,
			})
		},
		methods: {
			clickTab(name) {
				this.active = name
			}

		}
	}
</script>

<style scoped lang="scss">
</style>